<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
	</head>
	<body>
		<div class="container">
			<div class="content clearfix">
				<div class="header">
				<header>
					<nav>
						<a href="#" class="list-item">HOME</a>
						<a href="#section1" class="list-item">INTRODUCE</a>
						<a href="#section2" class="list-item">SERVICE</a>
						<a href="#section3" class="list-item">ABOUT</a>
						<a href="#" class="last-item">LOGIN</a>
					</nav>
				</header>
		        <div class="header-body clearfix">
		        	<div class="header-body-left">
		        		<span class="span1">全面覆盖媒体评分系统</span><br/>
		        		<span class="span2">反馈了解用户最需要的</span><br/>
		        		<button class="button3">查看</button>
		        	</div>
		        	<div class="header-body-right">
		        		<img src="images/score.png" alt="PRIME-RESEARCH"/>
		        	</div>
		        </div>
		       </div><!--header end--> 
		       
		         
                 
		        <div class="benefits">
		        	<div class="benefit">
		        		<a href="#section1">
		        		<img src="images/cloud.png" alt="PRIME-RESEARCH"/>
		        		<p class="p1">评分简介</p>
                        <p class="p2">了解您的用户想要的</p>
                        </a>
		        	</div>	
		        	<div class="benefit">
		        		<a href="#section2">
		        		<img src="images/cloud2.png" alt="PRIME-RESEARCH"/>
		        		<p class="p1">计算方式</p>
		        		<p class="p2">使用数据来确信你正在建立正确的事情</p>
                        </a>
		        		
		        	</div>	
		        	<div class="benefit">
		        		<a href="#section3">
		        		<img src="images/cloud3.png" alt="PRIME-RESEARCH"/>
		        		<p class="p1">指标说明</p>
		        		<p class="p2">通过简单的听取他们的说法来吸引用户</p>
                        </a>
		        		
		        	</div>	
		        </div>
			
			</div><!--content end-->
			
			<div class="section1">
				<div class="zb-descriptions">
					<a name="section1"></a>
					<div class="zb-description">
						<span class="zb-span zb-span1">评分简介</span><br/>
						<span class="zb-span zb-span2">将Canny嵌入您的网站或移动应用程序，让您的用户发表和投票反馈。</span><br/>
						<button class="button4">查看所有功能</button>
					</div>
					<div class="zb-description">
						<span class="zb-detail">
							分析和评价一个国家的可持续发展综合国力状况如何，除了进行定性的描述和分析之外，更重要的是需要对其进行定量描述和定量分析。所谓的定量
							分析就是要寻找或建立一个度量标尺，通
							过这一度量标尺去测量一个国家的可持续发展综合国力状况，进而回答人们
							普遍关心的问题：这个国家可持续发展综合国力的水平与发展态势如何？在国际上与其它国家进行比较这个国家所处的位置在哪里？增强或提升
							这个国家的可持续发展综合国力的途径是什么？回答这些问题是度量或评价可持续发展综合国力的目的和意义所在。
							度量或评价可持续发展综合国力是一个涉及到各个方面的连续过程。
							分析一个国家的可持续发展综合国力涉及到经济、科技、社会、军事、外交、生态、环境等很多方面，采用一
						</span>
						<a  class="more">查看更多 ...</a>
					</div>
				</div>
			</div>
			<div class="section2">
				<a name="section2"></a>
				<span>
					计算方式
				</span>
			</div>
			<div class="section3">
				<a name="section3"></a>
				<div class="introduces">
					<div class="introduce introduce1">
						<span class="zb-detail">
							分析和评价一个国家的可持续发展综合国力状况如何，除了进行定性的描述和分析之外，更重要的是需要对其进行定量描述和定量分析。所谓的定量
							分析就是要寻找或建立一个度量标尺，通
							过这一度量标尺去测量一个国家的可持续发展综合国力状况，进而回答人们
							普遍关心的问题：这个国家可持续发展综合国力的水平与发展态势如何？在国际上与其它国家进行比较这个国家所处的位置在哪里？增强或提升
							这个国家的可持续发展综合国力的途径是什么？回答这些问题是度量或评价可持续发展综合国力的目的和意义所在。
							度量或评价可持续发展综合国力是一个涉及到各个方面的连续过程。
							分析一个国家的可持续发展综合国力涉及到经济、科技、社会、军事、外交、生态、环境等很多方面，采用一
						</span>
						<a  class="more">查看更多 ...</a>
					</div>
					<div class="introduce introduce2" >
						<span class="zb-span zb-span1">指标说明</span><br/>
						<span class="zb-span zb-span2">将Canny嵌入您的网站或移动应用程序，让您的用户发表和投票反馈。</span><br/>
						<button class="button4">查看所有功能</button>
					</div>
				</div>
			</div>
			
			<footer>
				
			</footer>
		</div>
		
		
		<!--覆盖层-->
		<div class="panel">
	<div class="login-content">
		<div class="login-title">
			<span>欢迎登录媒体评分系统</span>
		</div>
		<div class="login-mesg">
			<table align="center">
				<tr>
					<th>用户名</th>
					<td><input type="text" name="" id="" value="" placeholder="请输入用户名"/></td>
				</tr>
				<tr>
					<th>密码</th>
					<td><input type="password" name="" id="" value="" placeholder="请输入密码"/></td>
				</tr>
			</table>
			
			<button class="loginBtn login-btn">登录</button>
			<button class="loginBtn login-cal">取消</button>
		</div>
	</div>
</div>
		
		
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript">
			//点击登录
			$(".last-item").click(function(){
				$(".panel").fadeIn(200);
			})
			
			//登录取消事件
			$(".login-cal").click(function(){
				$(".panel").fadeOut(200);
			})
			
		</script>
	</body>
</html>
